<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>迁移 &middot; Bootstrap</title>
<!-- Bootstrap 核心CSS -->
<link href="../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../assets/css/docsearch.min.css" rel="stylesheet">
<link href="../assets/css/docs.min.css" rel="stylesheet">

<!-- Favicons迁移定义 -->
<link rel="apple-touch-icon" href="../assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="../assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="../assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
  
<link rel="mask-icon" href="../assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="../favicon.ico">
<meta name="msapplication-config" content="../assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

<!-- Twitter -->
<meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Introduction">
<meta name="twitter:description" content="迁移 Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.">
<meta name="twitter:image" content="../assets/brand/bootstrap-social.png">

<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/introduction/">
<meta property="og:title" content="Introduction">
<meta property="og:description" content="迁移 Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.">
<meta property="og:type" content="website">
<meta property="og:image" content="../assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="../assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../index.html" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../index.html">首页</a></li>
      <li class="nav-item"><a class="nav-link active" href="../docs/index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link " href="../examples/index.html">实例</a></li>
      
      
      
      
    </ul>
  </div>
   
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="../migration/download.html">下载 Bootstrap</a> </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      


<nav class="collapse bd-links" id="bd-docs-nav">
  <div class="bd-toc-item"> <a class="bd-toc-link" href="../docs/index.html"> 快速入门 </a>
    <ul class="nav bd-sidenav">
    <li><a href="../docs/index.html">关于</a></li>
    <li><a href="../docs/download.html">下载</a></li>
    <li><a href="../docs/contents.html">目录结构</a></li>
    <li><a href="../docs/browsers-devices.html">浏览器与设备调优</a></li>
    <li><a href="../docs/javascript.html">JavaScript脚本</a></li>
    <li><a href="../docs/theming.html">主题化</a></li>
    <li><a href="../docs/build-tools.html">编译工具</a></li>
    <li><a href="../docs/webpack.html"> Webpack模块化</a></li>
    <li><a href="../docs/accessibility.html">无障碍浏览</a></li>
    </ul>
  </div>
  <div class="bd-toc-item"> <a class="bd-toc-link" href="../layout/overview.html"> 布局 </a>
    <ul class="nav bd-sidenav">
    <li><a href="../layout/overview.html">概述</a></li>
    <li><a href="../layout/grid.html">栅格</a></li>
    <li><a href="../layout/utilities-for-layout.html"> 布局实施建议 </a> </li>
    </ul>
  </div>
<div class="bd-toc-item"> <a class="bd-toc-link" href="../content/reboot.html">内容 </a>
  <ul class="nav bd-sidenav">
    <li><a href="../content/reboot.html"> 初始化与CSS重置 </a> </li>
    <li><a href="../content/typography.html"> 排版 </a> </li>
    <li><a href="../content/code.html"> 代码 </a> </li>
    <li><a href="../content/images.html"> 图片 </a> </li>
    <li><a href="../content/tables.html"> 表格 </a> </li>
    <li><a href="../content/figures.html"> 图文框 </a> </li>
  </ul>
</div>
<div class="bd-toc-item"> <a class="bd-toc-link" href="../components/alerts.html"> 组件 </a>
  <ul class="nav bd-sidenav">
    <li><a href="../components/alerts.html"> 警告提示框(Alerts) </a> </li>
    <li><a href="../components/badge.html"> 徽章(Badge) </a> </li>
    <li><a href="../components/breadcrumb.html"> 面包屑导航(Breadcrumb) </a> </li>
    <li><a href="../components/buttons.html"> 按钮(Button) </a> </li>
    <li><a href="../components/button-group.html"> 按钮组(Button-group) </a> </li>
    <li><a href="../components/card.html"> 卡片(Card) </a> </li>
    <li><a href="../components/carousel.html">  轮播效果(Carousell) </a> </li>
    <li><a href="../components/collapse.html"> 折叠面板(Collapse) </a> </li>
    <li><a href="../components/dropdowns.html"> 下拉菜单(Dropdown) </a> </li>
    <li><a href="../components/forms.html"> 表单(Form) </a> </li>
    <li><a href="../components/input-group.html"> 输入框(Input-group) </a> </li>
    <li><a href="../components/jumbotron.html"> Hero大块屏(Jumbotron) </a> </li>
    <li><a href="../components/list-group.html"> 列表组(List-group) </a> </li>
    <li><a href="../components/media-object.html"> 媒体对象/图文混排(Media-object) </a> </li>
    <li><a href="../components/modal.html"> 弹出模态框(Modal) </a> </li>
    <li><a href="../components/navs.html"> 导航/滑动门(Nav) </a> </li>
    <li><a href="../components/navbar.html"> 导航栏(Navbar) </a> </li>
    <li><a href="../components/pagination.html"> 分页(Pagination) </a> </li>
    <li><a href="../components/popovers.html"> POP提示(Popover) </a> </li>
    <li><a href="../components/progress.html"> 进度条(Progress) </a> </li>
    <li><a href="../components/scrollspy.html"> 滚动监听(Scrollspy) </a> </li>
    <li><a href="../components/spinners.html"> 旋转特效(Spinners) </a> </li>
    <li><a href="../components/toasts.html"> 弹出提示框(Toasts) </a> </li>
    <li><a href="../components/tooltips.html"> 提示冒泡(Tooltip) </a> </li>
  </ul>
</div>
<div class="bd-toc-item"> <a class="bd-toc-link" href="../utilities/borders.html"> 公共样式 </a>
  <ul class="nav bd-sidenav">
    <li><a href="../utilities/borders.html"> 边框(border) </a> </li>
    <li><a href="../utilities/clearfix.html"> 清动浮动(clearfix) </a> </li>
    <li><a href="../utilities/close-icon.html"> 关闭图标(close icon) </a> </li>
    <li><a href="../utilities/colors.html"> 颜色(color) </a> </li>
    <li><a href="../utilities/display.html"> Display显示属性 </a> </li>
    <li><a href="../utilities/embed.html"> 嵌入(embed) </a> </li>
    <li><a href="../utilities/flex.html"> Flex弹性布局 </a></li>
    <li><a href="../utilities/float.html"> Float浮动属性 </a> </li>
    <li><a href="../utilities/image-replacement.html"> 图像替换 </a> </li>
    <li><a href="../utilities/position.html"> Position固顶(底)及定位 </a> </li>
    <li><a href="../utilities/screenreaders.html"> 读屏器 (Screenreaders)</a></li>
    <li><a href="../utilities/shadows.html"> 阴影(shadows)</a></li>
    <li><a href="../utilities/sizing.html"> 规格(sizi)</a></li>
    <li><a href="../utilities/spacing.html"> 间隔(spacing) </a> </li>
    <li><a href="../utilities/text.html"> 文本处理 </a> </li>
    <li><a href="../utilities/vertical-align.html"> 垂直对齐(vertical align) </a> </li>
    <li><a href="../utilities/visibility.html"> Visibility显示或隐藏(能见度)处理 </a> </li>
  </ul>
</div>
<div class="bd-toc-item"> <a class="bd-toc-link" href="../extend/icons.html"> 延伸 </a>
  <ul class="nav bd-sidenav">
           <li><a href="../extend/approach.html"> 方法论 </a> </li>
           <li> <a href="../extend/icons.html"> 图标 </a> </li>
  </ul>
</div>
<div class="bd-toc-item active"> <a class="bd-toc-link" href="index.html"> 迁移 </a>
  <ul class="nav bd-sidenav">
  </ul>
</div>
<div class="bd-toc-item"> <a class="bd-toc-link" href="../about/history.html"> 关于 </a>
  <ul class="nav bd-sidenav">
    <li><a href="../about/history.html"> History </a> </li>
    <li><a href="../about/team.html"> Team </a> </li>
    <li><a href="../about/brand.html"> Brand </a> </li>
    <li><a href="../about/license.html"> License </a> </li>
    <li><a href="../about/translations.html"> Translations </a> </li>
  </ul>
</div>
</nav>
</div>


<div class="d-none d-xl-block col-xl-2 bd-toc">
  <ul class="section-nav">
     
	 <li class="toc-entry toc-h2"><a href="#stable-changes">稳定的变化</a>
      <ul>
        <li class="toc-entry toc-h3"><a href="#printing">打印</a></li>
      </ul>
    </li>
	 <li class="toc-entry toc-h2"><a href="#beta-3-changes">Bootstrap 3 的变化</a>
      <ul>
        <li class="toc-entry toc-h3"><a href="#miscellaneous">其他</a></li>
		<li class="toc-entry toc-h3"><a href="#forms-1">形式</a></li>
		<li class="toc-entry toc-h3"><a href="#input-groups">输入组</a></li>
      </ul>
    </li>
  
    <li class="toc-entry toc-h2"><a href="#beta-2-changes">Bootstrap 2 的变化</a>
      <ul>
        <li class="toc-entry toc-h3"><a href="#breaking">突破</a></li>
        <li class="toc-entry toc-h3"><a href="#highlights">强调</a></li>
      </ul>
    </li>
    <li class="toc-entry toc-h2"><a href="#summary">总结</a>
      <ul>
        <li class="toc-entry toc-h3"><a href="#browser-support">浏览器支持</a></li>
        <li class="toc-entry toc-h3"><a href="#global-changes">全局变化</a></li>
        <li class="toc-entry toc-h3"><a href="#grid-system">栅格系统</a></li>
        <li class="toc-entry toc-h3"><a href="#components">组件</a></li>
      </ul>
    </li>
    <li class="toc-entry toc-h2"><a href="#by-component">组件使用</a>
      <ul>
        <li class="toc-entry toc-h3"><a href="#reboot">重构</a></li>
        <li class="toc-entry toc-h3"><a href="#typography">排版</a></li>
        <li class="toc-entry toc-h3"><a href="#images">图像</a></li>
        <li class="toc-entry toc-h3"><a href="#tables">表格</a></li>
        <li class="toc-entry toc-h3"><a href="#forms">表单</a></li>
        <li class="toc-entry toc-h3"><a href="#buttons">按钮</a></li>
        <li class="toc-entry toc-h3"><a href="#button-group">按钮组</a></li>
        <li class="toc-entry toc-h3"><a href="#dropdowns">下拉菜单</a></li>
        <li class="toc-entry toc-h3"><a href="#grid-system-1">栅格系统</a></li>
        <li class="toc-entry toc-h3"><a href="#list-groups">列表组</a></li>
        <li class="toc-entry toc-h3"><a href="#modal">Modal</a></li>
        <li class="toc-entry toc-h3"><a href="#navs">导航</a></li>
        <li class="toc-entry toc-h3"><a href="#navbar">导航栏</a></li>
        <li class="toc-entry toc-h3"><a href="#pagination">分页</a></li>
        <li class="toc-entry toc-h3"><a href="#breadcrumbs">面包屑</a></li>
        <li class="toc-entry toc-h3"><a href="#labels-and-badges">标签 和 徽章</a></li>
        <li class="toc-entry toc-h3"><a href="#panels-thumbnails-and-wells">面板，缩略图</a></li>
        <li class="toc-entry toc-h3"><a href="#panels">面板</a></li>
        <li class="toc-entry toc-h3"><a href="#progress">进度条</a></li>
        <li class="toc-entry toc-h3"><a href="#carousel">轮放组件</a></li>
        <li class="toc-entry toc-h3"><a href="#tables-1">表格</a></li>
        <li class="toc-entry toc-h3"><a href="#utilities">公共样式</a></li>
        <li class="toc-entry toc-h3"><a href="#vendor-prefix-mixins">提供</a></li>
      </ul>
    </li>
    <li class="toc-entry toc-h2"><a href="#documentation">文档</a>
      <ul>
        <li class="toc-entry toc-h3"><a href="#responsive-utilities">响应式实用程序</a></li>
      </ul>
    </li>
  </ul>
</div>
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
  <h1 class="bd-title" id="content">迁移到BootStrap v4</h1>
  <p class="bd-lead">Bootstrap 4是整个项目的重大改写,最显着的变化总结如下，除此之外是相关组件的更具体的变化。</p>
   
  <h2>稳定的变化</h2>
  <p>从Bootstrap 3发展到我们稳定的v4.0版本，没有发生重大变化，但有一些显着的变化。</p>
  <h3>打印</h3>
  <ul>
  <li>
    <p>修复了损坏的打印工具以前，使用 <code class="highlighter-rouge">.d-print-*</code> 的class会意外地影响任何其他的 <code class="highlighter-rouge">.d-*</code> 的class. 现在，它们与我们的其他显示实用程序相匹配，仅适用于该媒体 (<code class="highlighter-rouge">@media print</code>)。</p>
  </li>
  <li>
    <p>扩展可用的打印显示实用程序以匹配其他实用程序 迁移到BootStrap 3和更早版本只有 <code class="highlighter-rouge">block</code>, <code class="highlighter-rouge">inline-block</code>, <code class="highlighter-rouge">inline</code>, 和 <code class="highlighter-rouge">none</code>。 稳定的v4增加了 <code class="highlighter-rouge">flex</code>, <code class="highlighter-rouge">inline-flex</code>, <code class="highlighter-rouge">table</code>, <code class="highlighter-rouge">table-row</code>, 和 <code class="highlighter-rouge">table-cell</code>。</p>
  </li>
  <li>
    <p>使用指定 <code class="highlighter-rouge">@page</code> <code class="highlighter-rouge">size</code>的新打印样式修复了浏览器中的打印预览呈现。.</p>
  </li>
</ul>
  <h2>Bootstrap 3 的变化</h2>
  <p>虽然Bootstrap 2在测试阶段看到了我们大部分突破性变化，但我们仍然有一些需要在Bootstrap 3版本中解决的问题。 如果您从Bootstrap 2更新到Bootstrap 3或更新版本的Bootstrap，则适用这些更改。</p>
  <h3>其他</h3>
  <ul>
  <li>删除了未使用的 <code class="highlighter-rouge">$thumbnail-transition</code> 变量。 我们没有转换任何东西，所以它只是额外的代码。</li>
  <li>npm软件包不再包含除源文件和dist文件以外的任何文件; 如果您依赖它们并通过 <code class="highlighter-rouge">node_modules</code> 文件夹运行我们的脚本，则应该调整您的工作流程。</li>
</ul>
<h3>形式</h3>
<ul>
  <li>
    <p>重写了自定义和默认复选框和音频。 现在，两者都具有匹配的HTML结构 (外部 <code class="highlighter-rouge">&lt;div&gt;</code> 与兄弟 <code class="highlighter-rouge">&lt;input&gt;</code> 和 <code class="highlighter-rouge">&lt;label&gt;</code>) 以及相同的布局样式（堆叠默认，内联修饰符类）。 这允许我们根据输入的状态来设置标签的样式，简化对 <code class="highlighter-rouge">disabled</code> 属性的支持（以前需要父类），并更好地支持我们的表单验证。</p>

    <p>作为其中的一部分，我们更改了用于管理自定义表单复选框和音频上的多个 <code class="highlighter-rouge">background-image</code>的CSS。以前, 现在移除的 <code class="highlighter-rouge">.custom-control-indicator</code> 元素具有背景颜色， 渐变和SVG图标。 定制背景渐变意味着每次只需要更换一个就可以替换所有这些。 现在，我们有 <code class="highlighter-rouge">.custom-control-label::before</code> 用于填充和渐变，并且.<code class="highlighter-rouge">.custom-control-label::after</code> 处理图标。</p>

    <p>要进行内联自定义检查，请添加<code class="highlighter-rouge">.custom-control-inline</code>。</p>
  </li>
  <li>
    <p>更新了基于输入的按钮组的选择器。 样式和行为不是<code class="highlighter-rouge">[data-toggle="buttons"] { }</code> 我们只使用JS属性的 <code class="highlighter-rouge">data</code> 属性， 并依赖一个新的 <code class="highlighter-rouge">.btn-group-toggle</code> 的class进行样式设计。</p>
  </li>
  <li>
    <p>删除 <code class="highlighter-rouge">.col-form-legend</code>，稍微改进<code class="highlighter-rouge">.col-form-label</code>。这样 <code class="highlighter-rouge">.col-form-label-sm</code> 和 <code class="highlighter-rouge">.col-form-label-lg</code> 可以轻松地用于 <code class="highlighter-rouge">&lt;legend&gt;</code> 元素。</p>
  </li>
  <li>
    <p>自定义文件输入接收到对其 <code class="highlighter-rouge">$custom-file-text</code> Sass 变量的更改。 它不再是一个嵌套的Sass地图， 现在只支持一个字符串 -<code class="highlighter-rouge">Browse</code> 按钮，因为这是现在从我们的Sass生成的唯一的伪元素。 选择 <code class="highlighter-rouge">Choose file</code> 文本现在来自 <code class="highlighter-rouge">.custom-file-label</code>.</p>
  </li>
</ul>
<h3>输入组</h3>
<ul>
  <li>
    <p>输入组插件现在特定于它们相对于输入的位置。 我们已经为两个新类，即<code class="highlighter-rouge">.input-group-addon</code> 和 <code class="highlighter-rouge">.input-group-btn</code> 删除了， <code class="highlighter-rouge">.input-group-prepend</code> 和 <code class="highlighter-rouge">.input-group-append</code>。 您现在必须明确地使用append或prepend， 这简化了我们的大部分CSS。在append或prepend中，将按钮放置在任何其他地方，但将文本包装在<code class="highlighter-rouge">.input-group-text</code>.</p>
  </li>
  <li>
    <p>现在支持验证样式，如多个输入（虽然您只能验证每个组的一个输入）。</p>
  </li>
  <li>
    <p>调整大小的类必须位于父代 <code class="highlighter-rouge">.input-group</code> 中， 而不是单个的表单元素。</p>
  </li>
</ul>
  
  <h2 id="beta-2-changes">Bootstrap 2 的变化</h2>
  <p>而在测试版中，我们的目标是没有突破性的变化。然而，事情并不总是按计划进行。下面是从Bootstrap 1到Bootstrap 2时要牢记的突破性变化。</p>
  <h3 id="breaking">突破</h3>
  <ul>
    <li>删除了 <code class="highlighter-rouge">$badge-color</code> 变量及其在<code class="highlighter-rouge">.badge</code>上的用法。我们使用<code class="highlighter-rouge">color</code> 对比功能根据 <code class="highlighter-rouge">background-color</code>选择颜色, 因此变量是不必要的。</li>
    <li>将 <code class="highlighter-rouge">grayscale()</code> 函数重命名为 <code class="highlighter-rouge">gray()</code> 以避免与CSS原生 <code class="highlighter-rouge">.grayscale</code> 发生冲突。</li>
    <li>将 <code class="highlighter-rouge">.table-inverse</code>， <code class="highlighter-rouge">.thead-inverse</code>， 和 <code class="highlighter-rouge">.thead-default</code> 重命名为 <code class="highlighter-rouge">.*-dark</code> 和 <code class="highlighter-rouge">.*-light</code>， 与我们其他地方使用的颜色方案相匹配。</li>
    <li>响应表现在为每个网格断点生成类。 这从Bootstrap 1开始，因为你一直使用的 <code class="highlighter-rouge">.table-responsive</code> 更像 <code class="highlighter-rouge">.table-responsive-md</code>。 您现在可以根据需要使用<code class="highlighter-rouge">.table-responsive</code> 或 <code class="highlighter-rouge">.table-responsive-{sm,md,lg,xl}</code> 自由选择。</li>
    <li>由于软件包管理器已被弃用以替代（例如Yarn或npm），因此丢弃了Bower支持。 <a href="https://github.com/bower/bower/issues/2298">See bower/bower#2298</a> 了解详情。</li>
    <li>Bootstrap仍然需要jQuery 1.9.1或更高版本，但建议使用3.x版本，因为v3.x支持的浏览器是Bootstrap支持的浏览器，而v3.x具有一些安全修复程序。</li>
    <li>删除了未使用的 <code class="highlighter-rouge">.form-control-label</code> 的class。 如果您确实使用了这个class, 那么它就是<code class="highlighter-rouge">.col-form-label</code> class的副本，它将垂直居中放置在水平表单布局中的相关输入 <code class="highlighter-rouge">&lt;label&gt;</code> 。</li>
    <li>将 <code class="highlighter-rouge">color-yiq</code> 从包含 <code class="highlighter-rouge">color</code> 属性的mixin更改为返回值的函数, 从而允许您将它用于任何CSS属性。例如，您可以使用<code class="highlighter-rouge">color-yiq(#000)</code>;而不是 <code class="highlighter-rouge">color: color-yiq(#000);</code>。</li>
  </ul>
  <h3 id="highlights">强调</h3>
  <ul>
    <li>在模态声明 <code class="highlighter-rouge">pointer-events</code> 用法。 外部的 <code class="highlighter-rouge">.modal-dialog</code> 对话框通过带有指针事件的事件 <code class="highlighter-rouge">pointer-events: none</code> 用于自定义点击处理 (使得可以在任何点击的 <code class="highlighter-rouge">.modal-backdrop</code> 上监听)， 然后使用指针抵消实际的 <code class="highlighter-rouge">.modal-content</code> 同 <code class="highlighter-rouge">pointer-events: auto</code>。</li>
  </ul>
  <h2 id="summary">总结</h2>
  <p>以下是从v3移至v4时需要注意的大要点。</p>
  <h3 id="browser-support">浏览器支持</h3>
  <ul>
    <li>放弃IE8，IE9和iOS 6的支持。 v4现在只有IE10 +和iOS 7+。 对于需要其中任何一个的网站，请使用v3。</li>
    <li>增加了对Android v5.0 Lollipop的浏览器和WebView的官方支持。 Android浏览器和WebView的早期版本仅保留非正式支持。</li>
  </ul>
  <h3 id="global-changes">全局变化</h3>
  <ul>
    <li><strong>Flexbox默认启用。</strong> 一般来说，这意味着要从浮筒和更多的组件上移开。</li>
    <li>我们的源CSS文件从<a href="http://lesscss.org/">Less</a> 切换到 <a href="http://sass-lang.com/">Sass</a> 。</li>
    <li>从<code class="highlighter-rouge">px</code> 切换到 <code class="highlighter-rouge">rem</code> 作为我们的主要CSS单元， 但像素仍然用于媒体查询和网格行为，因为设备视口不受字体大小的影响。</li>
    <li>全局字体大小从<code class="highlighter-rouge">14px</code> 增加到 <code class="highlighter-rouge">16px</code>。</li>
    <li>修改网格层以添加第五个选项 (解决<code class="highlighter-rouge">576px</code> 及更低的较小设备)， 并从这些类中移除 <code class="highlighter-rouge">-xs</code> 中缀。例如：<code class="highlighter-rouge">.col-6.col-sm-4.col-md-3</code>。</li>
    <li>用可配置选项通过SCSS变量替换单独的可选主题（例如，<code class="highlighter-rouge">$enable-gradients: true</code>)。</li>
    <li>修改系统以使用一系列npm脚本代替Grunt。  查看所有脚本的 <code class="highlighter-rouge">package.json</code>，或者我们的项目自述文件以了解本地开发需求。</li>
    <li>不再支持Bootstrap的无响应使用。</li>
    <li>放弃了在线Customizer，转而使用更广泛的安装文档和定制版本。</li>
    <li>为常见的CSS属性 - 值对和边距/填充间距快捷方式添加了许多新的 <a href="https://code.z01.com/docs/4.0/utilities/">实用程序类。</a> </li>
  </ul>
  <h3 id="grid-system">栅格系统</h3>
  <ul>
    <li><strong>移至flexbox。</strong>
      <ul>
        <li>增加了对网格mixins和预定义类中的flexbox的支持。</li>
        <li>作为flexbox的一部分，包括对垂直和水平对齐类的支持。</li>
      </ul>
    </li>
    <li><strong>更新了网格类名称和新的网格层。</strong>
      <ul>
        <li>在<code class="highlighter-rouge">768px</code>以下添加了一个新的<code class="highlighter-rouge">sm</code> 用于更精细的控制。 我们现在有 <code class="highlighter-rouge">xs</code>, <code class="highlighter-rouge">sm</code>, <code class="highlighter-rouge">md</code>, <code class="highlighter-rouge">lg</code>, 和 <code class="highlighter-rouge">xl</code>。 这也意味着每一层都被提升了一个层次 (所以v3中的 <code class="highlighter-rouge">.col-md-6</code> 现在是v4中的 <code class="highlighter-rouge">.col-lg-6</code>)。</li>
        <li><code class="highlighter-rouge">xs</code> 网格类已被修改为不需要中缀来更准确地表示他们开始 <code class="highlighter-rouge">min-width: 0</code> 而不是设置像素值。 而不是<code class="highlighter-rouge">.col-xs-6</code>, 它现在是 <code class="highlighter-rouge">.col-6</code>。 所有其他网格层都需要中缀 (例如: <code class="highlighter-rouge">sm</code>)。</li>
      </ul>
    </li>
    <li><strong>更新了网格大小，混合和变量。</strong>
      <ul>
        <li>网格间距现在有一个Sass地图，因此您可以在每个断点处指定特定的间距宽度。</li>
        <li>更新的网格混合使用 <code class="highlighter-rouge">make-col-ready</code> 混合 <code class="highlighter-rouge">make-col</code> 设置 <code class="highlighter-rouge">flex</code> 和 <code class="highlighter-rouge">max-width</code> 来设置单个列大小的弯曲和最大宽度。</li>
        <li>将网格系统媒体查询断点和容器宽度更改为新的网格层，并确保列在其最大宽度处可以被<code class="highlighter-rouge">12</code>整除。</li>
        <li>网格断点和容器宽度现在通过Sass地图 (<code class="highlighter-rouge">$grid-breakpoints</code> 和 <code class="highlighter-rouge">$container-max-widths</code>) 来处理，而不是一些单独的变量。这些将完全替换 <code class="highlighter-rouge">@screen-*</code> 变量 ，并允许您完全自定义网格层。</li>
        <li>媒体查询也发生了变化。 我们现在只有<code class="highlighter-rouge">@include media-breakpoint-up/down/only</code> ， 而不是每次重复使用相同值的媒体查询声明。现在，您可以不写 <code class="highlighter-rouge">@media (min-width: @screen-sm-min) { ... }</code>， 而可以编写 <code class="highlighter-rouge">@include media-breakpoint-up(sm) { ... }</code>。</li>
      </ul>
    </li>
  </ul>
  <h3 id="components">组件</h3>
  <ul>
    <li><strong>放置面板，缩略图</strong> 用于新的全面组件， <a href="https://code.z01.com/docs/4.0/components/card/">卡片</a>。</li>
    <li><strong>丢弃了Glyphicons图标字体。</strong> 如果你需要图标，一些选项是：
      <ul>
        <li><a href="https://glyphicons.com/">Glyphicons</a>及以上的版本。</li>
        <li><a href="https://octicons.github.com/">Octicons</a></li>
        <li><a href="http://fontawesome.io/">Font Awesome</a></li>
        <li>请参阅 <a href="https://code.z01.com/docs/4.0/extend/icons/">扩展页面</a>以获取替代方案列表。有其他建议吗？ 请打开问题或公关。</li>
      </ul>
    </li>
    <li><strong>删除了Affix jQuery插件。</strong>
      <ul>
        <li>我们建议使用 <code class="highlighter-rouge">position: sticky</code> 代替。有关详细信息和特定的polyfill建议，请参阅 <a href="http://html5please.com/#sticky">HTML5请参阅条目。</a> 一个建议是使用<code class="highlighter-rouge">@supports</code> 规则来实现它 (例如， <code class="highlighter-rouge">@supports (position: sticky) { ... }</code>)/</li>
        <li>如果您使用Affix来应用其他非位置样式， non-<code class="highlighter-rouge">position</code> 样式， 那么polyfills可能不支持您的用例。 这种用途的一个选择是第三方 <a href="https://github.com/acch/scrollpos-styler">ScrollPos-Styler</a> 库.</li>
      </ul>
    </li>
    <li><strong>丢弃了pager 组件，</strong> 因为它本质上是微小定制的按钮。</li>
    <li><strong>重构几乎所有的组件 </strong> 以使用更多的非嵌套类选择器而不是超特定的子选择器。</li>
  </ul>
  <h2 id="by-component">按钮组</h2>
  <p>此列表突出显示了v3.x.x和v4.0.0之间组件的关键更改。</p>
  <h3 id="reboot">重构</h3>
  <p>Bootstrap 4的新功能是<a href="https://code.z01.com/docs/4.0/content/reboot/">重构</a>, 这是一种新的样式表，它基于我们自己的一些自定义的重置样式进行规范化。 出现在这个文件中的选择器只使用元素 - 这里没有类。 这将我们的重置样式与我们的组件样式隔离开来， 以实现更模块化的方法 其中最重要的一些重置包括 <code class="highlighter-rouge">box-sizing: border-box</code> 的更改, 从许多元素上的 <code class="highlighter-rouge">em</code> 到 <code class="highlighter-rouge">rem</code> 单位, 以及许多表单元素重置。</p>
  <h3 id="typography">排版</h3>
  <ul>
    <li>将所有 <code class="highlighter-rouge">.text-</code> utilities 移至 <code class="highlighter-rouge">_utilities.scss</code> 文件。</li>
    <li>Dropped <code class="highlighter-rouge">.page-header</code> 除了边框之外， 其所有样式都可以通过实用工具应用。</li>
    <li><code class="highlighter-rouge">.dl-horizontal</code> 已被删除。 相反， 在<code class="highlighter-rouge">&lt;dl&gt;</code>上使用 <code class="highlighter-rouge">.row</code>， 并在其<code class="highlighter-rouge">&lt;dt&gt;</code> 和 <code class="highlighter-rouge">&lt;dd&gt;</code> 子级上使用网格列类（或mixins）。</li>
    <li>自定义 <code class="highlighter-rouge">&lt;blockquote&gt;</code> 样式已移至 classes—<code class="highlighter-rouge">.blockquote</code> 和 <code class="highlighter-rouge">.blockquote-reverse</code> 修饰符。</li>
    <li><code class="highlighter-rouge">.list-inline</code> 现在要求其子项列表项具有应用于它们的新的 <code class="highlighter-rouge">.list-inline-item</code> 类。 </li>
  </ul>
  <h3 id="images">图片</h3>
  <ul>
    <li>修改  <code class="highlighter-rouge">.img-responsive</code> 为 <code class="highlighter-rouge">.img-fluid</code>.</li>
    <li>修改 <code class="highlighter-rouge">.img-rounded</code> 为 <code class="highlighter-rouge">.rounded</code></li>
    <li>修改 <code class="highlighter-rouge">.img-circle</code> 为 <code class="highlighter-rouge">.rounded-circle</code></li>
  </ul>
  <h3 id="tables">表格</h3>
  <ul>
    <li>几乎所有 <code class="highlighter-rouge">&gt;</code> 选择器的实例都被删除， 这意味着css在会自动从父母继承样式。 这极大地简化了我们的选择器和潜在的定制。</li>
    <li>响应表不再需要包装元素。 相反，只需将 <code class="highlighter-rouge">.table-responsive</code> 类放在 <code class="highlighter-rouge">&lt;table&gt;</code>上即可。</li>
    <li>将 <code class="highlighter-rouge">.table-condensed</code> 重命名为 <code class="highlighter-rouge">.table-sm</code> 以保持一致性。</li>
    <li>添加了一个新的 <code class="highlighter-rouge">.table-inverse</code> 属性。</li>
    <li>增加了表头修饰符：<code class="highlighter-rouge">.thead-default</code> 和 <code class="highlighter-rouge">.thead-inverse</code>。</li>
    <li>将上下文类重命名为具有 <code class="highlighter-rouge">.table-</code>-前缀。 因此 <code class="highlighter-rouge">.active</code>, <code class="highlighter-rouge">.success</code>, <code class="highlighter-rouge">.warning</code>， <code class="highlighter-rouge">.danger</code> 和 <code class="highlighter-rouge">.info</code> 和  <code class="highlighter-rouge">.table-success</code>, <code class="highlighter-rouge">.table-warning</code>, <code class="highlighter-rouge">.table-danger</code> 和 <code class="highlighter-rouge">.table-info</code>转化为<code class="highlighter-rouge">.table-active</code>。</li>
  </ul>
  <h3 id="forms">表单</h3>
  <ul>
    <li>移动元素重置为<code class="highlighter-rouge">_reboot.scss</code> 文件。</li>
    <li>将 <code class="highlighter-rouge">.control-label</code> 重命名为 <code class="highlighter-rouge">.col-form-label</code>。</li>
    <li>将 <code class="highlighter-rouge">.input-lg</code> 和 <code class="highlighter-rouge">.input-sm</code> 重命名为 <code class="highlighter-rouge">.form-control-lg</code> 和 <code class="highlighter-rouge">.form-control-sm</code>。</li>
    <li>为了简单起见，丢弃了 <code class="highlighter-rouge">.form-group-*</code> 类。 现在使用 <code class="highlighter-rouge">.form-control-*</code> 类。</li>
    <li>删除 <code class="highlighter-rouge">.help-block</code> 并用 <code class="highlighter-rouge">.form-text</code> 替换为块级帮助文本。 对于内联帮助文本和其他灵活选项， 请使用实用程序类 ，如<code class="highlighter-rouge">.text-muted</code>。</li>
    <li>丢弃 <code class="highlighter-rouge">.radio-inline</code> 和 <code class="highlighter-rouge">.checkbox-inline</code>。</li>
    <li>将 <code class="highlighter-rouge">.checkbox</code> 和 <code class="highlighter-rouge">.radio</code> 合并为 <code class="highlighter-rouge">.form-check</code> 和各种 <code class="highlighter-rouge">.form-check-*</code> 类.</li>
    <li>水平形式修改：
      <ul>
        <li>放弃了 <code class="highlighter-rouge">.form-horizontal</code> 类的要求。</li>
        <li><code class="highlighter-rouge">.form-group</code> 不再通过mixin从 <code class="highlighter-rouge">.row</code> 中应用样式， 所以 <code class="highlighter-rouge">.row</code> 现在需要用于水平网格布局 (例如， <code class="highlighter-rouge">&lt;div class="form-group row"&gt;</code>).</li>
        <li>使用 <code class="highlighter-rouge">.col-form-label</code>  添加新的 <code class="highlighter-rouge">.form-control</code>类来垂直居中标注。</li>
        <li>使用网格类为紧凑表单布局添加新的 <code class="highlighter-rouge">.form-row</code> (将 <code class="highlighter-rouge">.row</code> 替换为 <code class="highlighter-rouge">.form-row</code> 并继续使用)。</li>
      </ul>
    </li>
    <li>添加了自定义表单支持 (用于 复选框, 音频, 选择框, 和 选择文件 输入框)。</li>
    <li>使用CSS的HTML5表单验证替换 <code class="highlighter-rouge">.has-error</code>, <code class="highlighter-rouge">.has-warning</code>, 和 <code class="highlighter-rouge">.has-success</code> 类 <code class="highlighter-rouge">:invalid</code> 和 <code class="highlighter-rouge">:valid</code> 伪类。</li>
    <li>将 <code class="highlighter-rouge">.form-control-static</code> 重命名为 <code class="highlighter-rouge">.form-control-plaintext</code>。</li>
  </ul>
  <h3 id="buttons">按钮</h3>
  <ul>
    <li>将 <code class="highlighter-rouge">.btn-default</code> 重命名为 <code class="highlighter-rouge">.btn-secondary</code>。</li>
    <li>放弃 <code class="highlighter-rouge">.btn-xs</code> 这个类， 因为 <code class="highlighter-rouge">.btn-sm</code> 的比例要比v3小得多。</li>
    <li>将 <a href="https://code.z01.com/docs/3.3/javascript/#buttons-stateful">stateful button</a> <code class="highlighter-rouge">button.js</code> 插件的状态按钮功能删除。这包括<code class="highlighter-rouge">$().button(string)</code> 和 <code class="highlighter-rouge">$().button('reset')</code> 方法。我们建议使用一小部分自定义JavaScript代替， 这样做的好处是可以按照您希望的方式进行操作。
      <ul>
        <li>请注意，插件的其他功能（按钮复选框，按钮收音频，单切换按钮）已保留在v4中。</li>
      </ul>
    </li>
    <li>将按钮 <code class="highlighter-rouge">[disabled]</code> 改为 <code class="highlighter-rouge">:disabled</code> 因为IE9 +支持 <code class="highlighter-rouge">:disabled</code>。 然而 <code class="highlighter-rouge">fieldset[disabled]</code> 仍然是必要的， <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#Browser_compatibility">因为IE11中原生的禁用字段仍然是bug</a>。</li>
  </ul>
  <h3 id="button-group">按钮组</h3>
  <ul>
    <li>用flexbox重写组件。</li>
    <li>删除了 <code class="highlighter-rouge">.btn-group-justified</code>。 作为替换，你可以使用 <code class="highlighter-rouge">&lt;div class="btn-group d-flex" role="group"&gt;&lt;/div&gt;</code> 作为包含<code class="highlighter-rouge">.w-100</code>。</li>
    <li>完全放弃了 <code class="highlighter-rouge">.btn-group-xs</code> 类， 并删除了 <code class="highlighter-rouge">.btn-xs</code>。</li>
    <li>删除按钮工具栏中按钮组之间的显式间距; 现在使其它类。</li>
    <li>改进了与其他组件一起使用的文档。</li>
  </ul>
  <h3 id="dropdowns">下拉菜单</h3>
  <ul>
    <li>从父选择器切换到所有组件，修饰符等的单数类。</li>
    <li>简化的下拉样式不再随附在下拉菜单上的朝上或朝下箭头方向。</li>
    <li>下拉菜单现在可以用 <code class="highlighter-rouge">&lt;div&gt;</code>s 或 <code class="highlighter-rouge">&lt;ul&gt;</code>建立。</li>
    <li>重建下拉式样和标记，为基于 <code class="highlighter-rouge">&lt;a&gt;</code> 和 <code class="highlighter-rouge">&lt;button&gt;</code> 的下拉项目提供简单的内置支持。</li>
    <li>将 <code class="highlighter-rouge">.divider</code> 重命名为 <code class="highlighter-rouge">.dropdown-divider</code>。</li>
    <li>下拉项目现在需要 <code class="highlighter-rouge">.dropdown-item</code>中建立。</li>
    <li>下拉式切换不再需要明确的 <code class="highlighter-rouge">&lt;span class="caret"&gt;&lt;/span&gt;</code>; 这现在通过CSS <code class="highlighter-rouge">::after</code> on <code class="highlighter-rouge">.dropdown-toggle</code>自动提供。</li>
  </ul>
  <h3 id="grid-system-1">栅格系统</h3>
  <ul>
    <li>以 <code class="highlighter-rouge">sm</code>增加了一个新的 <code class="highlighter-rouge">576px</code> 网格断点， 这意味着现在有五个总层 (<code class="highlighter-rouge">xs</code>, <code class="highlighter-rouge">sm</code>, <code class="highlighter-rouge">md</code>, <code class="highlighter-rouge">lg</code>, 和 <code class="highlighter-rouge">xl</code>)。</li>
    <li>更简单的网格类将 <code class="highlighter-rouge">.col-{断点}-{修饰符}-{大小}</code> 的响应网格修饰符类重命名为。 <code class="highlighter-rouge">.{修饰符}-{断点}-{大小}</code> 。</li>
    <li>为新的弹性布局提供 <code class="highlighter-rouge">order</code> 类。例如，您可以使用 <code class="highlighter-rouge">.col-8.push-4</code> 和 <code class="highlighter-rouge">.col-4.pull-8</code>, 而不是 <code class="highlighter-rouge">.col-8.order-2</code> 和 <code class="highlighter-rouge">.col-4.order-1</code>。</li>
    <li>为网格系统和组件添加了flexbox实用程序类。</li>
  </ul>
  <h3 id="list-groups">列表组</h3>
  <ul>
    <li>用flexbox重写组件。</li>
    <li>用明确的类，<code class="highlighter-rouge">a.list-group-item</code> 替换 <code class="highlighter-rouge">.list-group-item-action</code>, 以便为列表组项的链接和按钮版本进行样式设置。</li>
    <li>添加了 <code class="highlighter-rouge">.list-group-flush</code> 类以用于卡片。</li>
  </ul>
  <h3 id="modal">Modal</h3>
  <ul>
    <li>用flexbox重写组件。</li>
    <li>鉴于移动到flexbox，标题中排除图标的对齐可能会被破坏，因为我们不再使用浮动。 浮动内容是第一位的，但对于不再是这种情况的Flexbox。 更新你的解雇图标来模式标题来解决。</li>
    <li>选项 <code class="highlighter-rouge">remote</code> (可用于自动加载和注入外部内容到模式中) 和相应的 <code class="highlighter-rouge">loaded.bs.modal</code> 事件被删除。我们建议使用客户端模板或数据绑定框架， 或者自己调用 <a href="https://api.jquery.com/load/">jQuery.load</a> 。</li>
  </ul>
  <h3 id="navs">导航</h3>
  <ul>
    <li>用flexbox重写组件。</li>
    <li>通过非嵌套类删除几乎所有 <code class="highlighter-rouge">&gt;</code> 选择器以实现更简单的样式。</li>
    <li>我们对<code class="highlighter-rouge">.nav</code>, <code class="highlighter-rouge">.nav-item</code>, 和 <code class="highlighter-rouge">.nav-link</code>使用单独的类，
	而不是像<code class="highlighter-rouge">.nav &gt; li &gt; a</code>这样的HTML特定选择器，这使得您的HTML更加灵活，同时增加了可扩展性。</li>
  </ul>
  <h3 id="navbar">导航栏</h3>
  <p>导航栏已经在flexbox中完全重写，改进了对齐，响应和定制支持。</p>
  <ul>
    <li>响应式导航栏行为现在通过所需的<code class="highlighter-rouge">.navbar-expand-{断点}</code> 应用于<code class="highlighter-rouge">.navbar</code> 类， 您可以在其中选择折叠导航栏的位置。 以前这是一个较少变量的修改重新编译。</li>
    <li><code class="highlighter-rouge">.navbar-default</code> 现在是 <code class="highlighter-rouge">.navbar-light</code>， 但 <code class="highlighter-rouge">.navbar-dark</code> 保持不变。 <strong>其中一个是每个导航栏上都需要的。</strong> 但是，这些类不再设置 <code class="highlighter-rouge">background-color</code>； 相反，它们基本上只影响 <code class="highlighter-rouge">color</code>。</li>
    <li>Navbar现在需要某种背景声明。 从我们的背景实用程序(<code class="highlighter-rouge">.bg-*</code>)中选择， 或者使用上面的轻/反类来设置您自己的 <a href="https://code.z01.com/docs/4.0/components/navbar/#color-schemes">疯狂自定义</a>。</li>
    <li>鉴于flexbox的风格，navbars现在可以使用flexbox工具来轻松对齐选项。</li>
    <li><code class="highlighter-rouge">.navbar-toggle</code> 现在是 <code class="highlighter-rouge">.navbar-toggler</code> ，具有不同的样式和内部标记 (不再有 <code class="highlighter-rouge">&lt;span&gt;</code>。</li>
    <li>完全抛弃了 <code class="highlighter-rouge">.navbar-form </code> 这个类. 它不再是必要的;  相反，只需使用 <code class="highlighter-rouge">.form-inline</code> 并根据需要应用实用程序。</li>
    <li>默认情况下Navbar不再包含 <code class="highlighter-rouge">margin-bottom</code> 或 <code class="highlighter-rouge">border-radius</code>必要时使用实用程序。</li>
    <li>所有以导航栏为特色的示例已更新为包含新标记。</li>
  </ul>
  <h3 id="pagination">分页</h3>
  <ul>
    <li>用flexbox重写组件。</li>
    <li>显式类 (<code class="highlighter-rouge">.page-item</code>, <code class="highlighter-rouge">.page-link</code>) 现在需要在 <code class="highlighter-rouge">.pagination</code>的后代中使用。</li>
    <li>完全丢弃了<code class="highlighter-rouge">.pager</code>组件 ，因为它不过是自定义轮廓按钮。.</li>
  </ul>
  <h3 id="breadcrumbs">面包屑</h3>
  <ul>
    <li> <code class="highlighter-rouge">.breadcrumb</code>的后代现在需要添加类<code class="highlighter-rouge">.breadcrumb-item</code>。</li>
  </ul>
  <h3 id="labels-and-badges">标签和徽章</h3>
  <ul>
    <li>将 <code class="highlighter-rouge">.label</code> 重命名为 <code class="highlighter-rouge">.badge</code>  ，从而<code class="highlighter-rouge">&lt;label&gt;</code> 元素消除歧义。</li>
    <li>放弃 <code class="highlighter-rouge">.badge</code> 组件， 因为它几乎与标签相同。将 <code class="highlighter-rouge">.badge-pill</code> 修饰符与标签组件一起使用，以代替该圆形外观。</li>
    <li>徽章不再自动在列表组和其他组件中自动浮动。 实用程序类现在需要。</li>
    <li><code class="highlighter-rouge">.badge-default</code> 已被删除，并添加了 <code class="highlighter-rouge">.badge-secondary</code> 以匹配别处使用的组件修饰符类。</li>
  </ul>
  <h3 id="panels-thumbnails-and-wells">面板，缩略图</h3>
  <p>完全丢弃新卡组件。</p>
  <h3 id="panels">面板</h3>
  <ul>
    <li><code class="highlighter-rouge">.panel</code> 改为 <code class="highlighter-rouge">.card</code>，现在用flexbox构建。</li>
    <li><code class="highlighter-rouge">.panel-default</code> 被删除并且没有替换。</li>
    <li><code class="highlighter-rouge">.panel-group</code> 被移除并且没有替换。 <code class="highlighter-rouge">.card-group</code> 不是替代品，它是不同的。</li>
    <li><code class="highlighter-rouge">.panel-heading</code> 改为了 <code class="highlighter-rouge">.card-header</code></li>
    <li><code class="highlighter-rouge">.panel-title</code> 改为了 <code class="highlighter-rouge">.card-title</code>。 您可能还想使用 <a href="https://code.z01.com/docs/4.0/content/typography/#headings">heading elements or classes</a> (例如： <code class="highlighter-rouge">&lt;h3&gt;</code>, <code class="highlighter-rouge">.h3</code>) 或粗体元素或类 (例如： <code class="highlighter-rouge">&lt;strong&gt;</code>, <code class="highlighter-rouge">&lt;b&gt;</code>, <a href="https://code.z01.com/docs/4.0/utilities/text/#font-weight-and-italics"><code class="highlighter-rouge">.font-weight-bold</code></a>)。 请注意， <code class="highlighter-rouge">.card-title</code>标题虽然具有相同的名称，但产生与<code class="highlighter-rouge">.panel-title</code>标题不同的外观。</li>
    <li><code class="highlighter-rouge">.panel-body</code> 改为 <code class="highlighter-rouge">.card-body</code></li>
    <li><code class="highlighter-rouge">.panel-footer</code> 改为 <code class="highlighter-rouge">.card-footer</code></li>
    <li><code class="highlighter-rouge">.panel-primary</code>, <code class="highlighter-rouge">.panel-success</code>, <code class="highlighter-rouge">.panel-info</code>, <code class="highlighter-rouge">.panel-warning</code>, 和 <code class="highlighter-rouge">.panel-danger</code> 已被放弃 <code class="highlighter-rouge">.bg-</code>, <code class="highlighter-rouge">.text-</code>, 和 <code class="highlighter-rouge">.border</code> 被我们列为公共样式 <code class="highlighter-rouge">$theme-colors</code> Sass 地图.</li>
  </ul>
  <h3 id="progress">进度条</h3>
  <ul>
    <li>使用<code class="highlighter-rouge">.bg-*</code>实用程序替换 <code class="highlighter-rouge">.progress-bar-*</code>类 。 例如, <code class="highlighter-rouge">class="progress-bar progress-bar-danger"</code> 变为 <code class="highlighter-rouge">class="progress-bar bg-danger"</code>.</li>
  </ul>
  <h3 id="carousel">轮放组件</h3>
  <ul>
    <li>彻底改变了整个组件以简化设计和样式。 我们有更少的款式可供您覆盖，新指标和新图标。</li>
    <li>所有的CSS都被取消嵌套和重命名，确保每个类的前缀都是 <code class="highlighter-rouge">.carousel-</code>。
      <ul>
        <li>对于轮放组件, <code class="highlighter-rouge">.next</code>, <code class="highlighter-rouge">.prev</code>, <code class="highlighter-rouge">.left</code>, 和 <code class="highlighter-rouge">.right</code> 现在改成 <code class="highlighter-rouge">.carousel-item-next</code>, <code class="highlighter-rouge">.carousel-item-prev</code>, <code class="highlighter-rouge">.carousel-item-left</code>, 和 <code class="highlighter-rouge">.carousel-item-right</code>。</li>
        <li><code class="highlighter-rouge">.item</code> 现在改成 <code class="highlighter-rouge">.carousel-item</code>.</li>
        <li>对于 prev/next 控件, <code class="highlighter-rouge">.carousel-control.right</code> 和 <code class="highlighter-rouge">.carousel-control.left</code> 改成了 <code class="highlighter-rouge">.carousel-control-next</code> 和 <code class="highlighter-rouge">.carousel-control-prev</code> 这意味着他们不再需要特定的基类。</li>
      </ul>
    </li>
    <li>删除所有响应式样式，并根据需要推迟使用实用工具（例如，在某些视口上显示字幕）和自定义样式。</li>
    <li>删除图像覆盖轮放组件项目中的图像，推迟到实用程序。</li>
    <li>调整了Carousel示例以包含新的标记和样式。</li>
  </ul>
  <h3 id="tables-1">仪表盘</h3>
  <ul>
    <li>删除了对样式化嵌套表的支持。 所有表格样式现在都在v4中继承，用于更简单的选择器。</li>
    <li>添加了反向表格变体。</li>
  </ul>
  <h3 id="utilities">公用样式</h3>
  <ul>
    <li><strong>显示，隐藏等等：</strong>
      <ul>
        <li>使显示实用程序响应 (例如, <code class="highlighter-rouge">.d-none</code> 和 <code class="highlighter-rouge">d-{sm,md,lg,xl}-none</code>)。</li>
        <li>删除了新的显示实用程序的大部分 <code class="highlighter-rouge">.hidden-*</code> 实用程序。 <a href="https://code.z01.com/docs/4.0/utilities/display/">display utilities</a>。而不是 <code class="highlighter-rouge">.hidden-sm-up</code>， 请使用 <code class="highlighter-rouge">.d-sm-none</code>。 将 <code class="highlighter-rouge">.hidden-print</code> 实用程序重命名为使用显示实用程序命名方案。<a href="#responsive-utilities">在此页面的“响应式应用程序”部分下提供更多信息。</a></li>
        <li>添加 <code class="highlighter-rouge">.float-{sm,md,lg,xl}-{left,right,none}</code> 类， 为响应浮动和删除 <code class="highlighter-rouge">.pull-left</code> 和 <code class="highlighter-rouge">.pull-right</code> 因为它们是多余的 <code class="highlighter-rouge">.float-left</code> 和 <code class="highlighter-rouge">.float-right</code>。</li>
      </ul>
    </li>
    <li><strong>类型:</strong>
      <ul>
        <li>为我们的文本对齐类添加了响应式变体 <code class="highlighter-rouge">.text-{sm,md,lg,xl}-{left,center,right}</code>。</li>
      </ul>
    </li>
    <li><strong>对齐和间距:</strong>
      <ul>
        <li>为所有增加了新的 <a href="https://code.z01.com/docs/4.0/utilities/spacing/">响应性边距和填充工具</a>，以及垂直和水平的短手。</li>
        <li>增加了 <a href="https://code.z01.com/docs/4.0/utilities/flex/">flexbox实用程序</a>的容器。</li>
        <li>删除 <code class="highlighter-rouge">.center-block</code> 类，添加 <code class="highlighter-rouge">.mx-auto</code> 类。</li>
      </ul>
    </li>
  </ul>
  <h3 id="vendor-prefix-mixins">提供前缀混合</h3>
  <p>Bootstrap 3的 <a href="https://www.thoughtco.com/css-vendor-prefixes-3466867">vendor prefix</a> mixins, 在v3.2.0中已弃用, 已在Bootstrap 4中删除。由于我们使用 <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a>， 因此不再需要它们。</p>
  <p>删除了以下mixin： <code class="highlighter-rouge">animation</code>, <code class="highlighter-rouge">animation-delay</code>, <code class="highlighter-rouge">animation-direction</code>, <code class="highlighter-rouge">animation-duration</code>, <code class="highlighter-rouge">animation-fill-mode</code>, <code class="highlighter-rouge">animation-iteration-count</code>, <code class="highlighter-rouge">animation-name</code>, <code class="highlighter-rouge">animation-timing-function</code>, <code class="highlighter-rouge">backface-visibility</code>, <code class="highlighter-rouge">box-sizing</code>, <code class="highlighter-rouge">content-columns</code>, <code class="highlighter-rouge">hyphens</code>, <code class="highlighter-rouge">opacity</code>, <code class="highlighter-rouge">perspective</code>, <code class="highlighter-rouge">perspective-origin</code>, <code class="highlighter-rouge">rotate</code>, <code class="highlighter-rouge">rotateX</code>, <code class="highlighter-rouge">rotateY</code>, <code class="highlighter-rouge">scale</code>, <code class="highlighter-rouge">scaleX</code>, <code class="highlighter-rouge">scaleY</code>, <code class="highlighter-rouge">skew</code>, <code class="highlighter-rouge">transform-origin</code>, <code class="highlighter-rouge">transition-delay</code>, <code class="highlighter-rouge">transition-duration</code>, <code class="highlighter-rouge">transition-property</code>, <code class="highlighter-rouge">transition-timing-function</code>, <code class="highlighter-rouge">transition-transform</code>, <code class="highlighter-rouge">translate</code>, <code class="highlighter-rouge">translate3d</code>, <code class="highlighter-rouge">user-select</code></p>
  <h2 id="documentation">文档</h2>
  <p>我们的文档也获得了全面升级。 这是最重要的一点：</p>
  <ul>
    <li>我们仍在使用Jekyll，但是我们有插件：
      <ul>
        <li><code class="highlighter-rouge">bugify.rb</code>用于有效地列出 <a href="https://code.z01.com/docs/4.0/browser-bugs/">浏览器错误</a> 页面上的条目。</li>
        <li><code class="highlighter-rouge">example.rb</code> 是默认 <code class="highlighter-rouge">highlight.rb</code> 插件的自定义分支，允许更简单的示例代码处理。</li>
        <li><code class="highlighter-rouge">callout.rb</code> 是一个类似的自定义分支，但为我们的特殊文档标注而设计。</li>
        <li><code class="highlighter-rouge">markdown-block.rb</code> 用于在表格中呈现HTML元素内的Markdown片段。</li>
        <li><a href="https://github.com/toshimaru/jekyll-toc">jekyll-toc</a> 用于生成我们的目录。</li>
      </ul>
    </li>
    <li>所有文档内容都已在Markdown（而不是HTML）中重写，以便于编辑。</li>
    <li>页面已被重新组织，以获得更简单的内容和更平易近人的层次结构。</li>
    <li>我们从常规CSS转移到SCSS，充分利用Bootstrap的变量，mixins等等。</li>
  </ul>
  <h3 id="responsive-utilities">响应式实用程序</h3>
  <p>所有 <code class="highlighter-rouge">@screen-</code> 变量已在v4.0.0中删除。 改为使用 <code class="highlighter-rouge">media-breakpoint-up()</code>， <code class="highlighter-rouge">media-breakpoint-down()</code>， 或 <code class="highlighter-rouge">media-breakpoint-only()</code> 或 <code class="highlighter-rouge">$grid-breakpoints</code> 。</p>
  <p>我们的响应式实用程序类在很大程度上已被删除，以支持显式 <code class="highlighter-rouge">display</code> 实用程序。</p>
  <ul>
    <li>其中 <code class="highlighter-rouge">.hidden</code> 和 <code class="highlighter-rouge">.show</code> 类已被删除，因为它们与jQuery的 <code class="highlighter-rouge">$(...).hide()</code> 和 <code class="highlighter-rouge">$(...).show()</code> 方法冲突。相反，尝试切换 <code class="highlighter-rouge">[hidden]</code> 属性或使用内联样式，<code class="highlighter-rouge">style="display: none;"</code> 和 <code class="highlighter-rouge">style="display: block;"</code>。</li>
    <li>除了已重命名的打印实用程序外，所有 <code class="highlighter-rouge">.hidden-</code> 类都被删除。
      <ul>
        <li>从v3中删除： <code class="highlighter-rouge">.hidden-xs</code> <code class="highlighter-rouge">.hidden-sm</code> <code class="highlighter-rouge">.hidden-md</code> <code class="highlighter-rouge">.hidden-lg</code> <code class="highlighter-rouge">.visible-xs-block</code> <code class="highlighter-rouge">.visible-xs-inline</code> <code class="highlighter-rouge">.visible-xs-inline-block</code> <code class="highlighter-rouge">.visible-sm-block</code> <code class="highlighter-rouge">.visible-sm-inline</code> <code class="highlighter-rouge">.visible-sm-inline-block</code> <code class="highlighter-rouge">.visible-md-block</code> <code class="highlighter-rouge">.visible-md-inline</code> <code class="highlighter-rouge">.visible-md-inline-block</code> <code class="highlighter-rouge">.visible-lg-block</code> <code class="highlighter-rouge">.visible-lg-inline</code> <code class="highlighter-rouge">.visible-lg-inline-block</code></li>
        <li>从v4 alphas中删除： <code class="highlighter-rouge">.hidden-xs-up</code> <code class="highlighter-rouge">.hidden-xs-down</code> <code class="highlighter-rouge">.hidden-sm-up</code> <code class="highlighter-rouge">.hidden-sm-down</code> <code class="highlighter-rouge">.hidden-md-up</code> <code class="highlighter-rouge">.hidden-md-down</code> <code class="highlighter-rouge">.hidden-lg-up</code> <code class="highlighter-rouge">.hidden-lg-down</code></li>
      </ul>
    </li>
    <li>打印实用程序不再以此开头<code class="highlighter-rouge">.hidden-</code> 或 <code class="highlighter-rouge">.visible-</code>, 但是 <code class="highlighter-rouge">.d-print-</code>
      <ul>
        <li>原来的类： <code class="highlighter-rouge">.visible-print-block</code>, <code class="highlighter-rouge">.visible-print-inline</code>, <code class="highlighter-rouge">.visible-print-inline-block</code>, <code class="highlighter-rouge">.hidden-print</code></li>
        <li>新的类 ： <code class="highlighter-rouge">.d-print-block</code>, <code class="highlighter-rouge">.d-print-inline</code>, <code class="highlighter-rouge">.d-print-inline-block</code>, <code class="highlighter-rouge">.d-print-none</code></li>
      </ul>
    </li>
  </ul>
  <p>而不是使用明确的 <code class="highlighter-rouge">.visible-*</code> 类, 而是通过将该元素隐藏在该屏幕尺寸上来使元素可见。您可以将一个 <code class="highlighter-rouge">.d-*-none</code> 类与一个 <code class="highlighter-rouge">.d-*-block</code> 类组合在一起，仅在给定的屏幕大小间隔内显示一个元素 (例如： <code class="highlighter-rouge">.d-none.d-md-block.d-xl-none</code> 仅在中型和大型设备上显示元素)。</p>
  <p>请注意，对v4中的网格断点的更改意味着您需要增大一个断点才能达到相同的结果。 新的响应式实用程序类别不会尝试适应不常见的情况，即元素的可见性无法表示为视口大小的单个连续范围; 您将需要在这种情况下使用自定义CSS。
</p>
</main>
</div>

</div>


<script src="../js/jquery-3.2.1.slim.min.js"></script> 
<script>window.jQuery || document.write('<script src="../assets/js/vendor/jquery-slim.min.js"><\/script>')</script> 
<script src="../dist/js/popper.min.js"></script> 
<script src="../dist/js/bootstrap.min.js"></script> 
<script src="../assets/js/docs.min.js"></script> 
<script src="../assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../assets/js/docsearch.min.js"></script> 
 

</body>
</html>
